<template>
    <div id="swiperTop">
        <van-swipe :autoplay="3000" laze-render>
            <van-swipe-item v-for="(image, index) in images" :key="index">
                <img :src="image.pic" />
            </van-swipe-item>
        </van-swipe>
    </div>
</template>

<script>
import { getBanner } from "@/request/api/home";
export default {
    data() {
        return {
            images: [],
        }
    },
    methods:{
        async getimages(){
            const result = await getBanner()
            if(result.request.status === 200){
                this.images = result.data.banners
            }else{
                alert('获取轮播图数据失败')
            }
        }
    },
    mounted(){
        this.getimages()
    }
}
</script>

<style lang="less">
#swiperTop {
  //需要在上面自己添加一个id
  .van-swipe {
    width: 100%;
    height: 3rem;
    .van-swipe-item {
      padding: 0 0.2rem;
      img {
        width: 100%;
        height: 100%;
        border-radius: 0.2rem;
      }
    }
    .van-swipe__indicator--active {
      background-color: rgb(219, 130, 130);
    }
  }
}
</style>